<template>
	<div class="redis-queue" ref="redis-queue">
		<Table v-if="tableHeight" :columns="thead" :data="tbody" :height="tableHeight"></Table>
	</div>
</template>

<script>
	import { redisQueueThead } from 'common/js/table';
	import { getHeight, errorNotice } from 'common/js/dom';
	import { getQueue } from 'api/RedisMonitor';
	
	export default {
		created() {
			this._getQueue();
			
			this.time = setInterval(() => {
				this._getQueue();
			}, 2000)
		},
		mounted() {
			setTimeout(() => {
				this.tableHeight = getHeight(this.$refs['redis-queue']);
			}, 20)		
		},
		data() {
			return {
				thead: redisQueueThead(),
				tbody: [],
				tableHeight: null
			}
		},
		methods: {
			_getQueue() {
				getQueue()
					.then(res => {
						setTimeout(() => {
							this.tbody = res;
						}, 20)
					})
					.catch(res => {
						errorNotice(res.message);
					})
			}
		},
		beforeDestroy() {
			clearInterval(this.time);
		}
	}
</script>

<style scoped lang="scss">
	.redis-queue {
		width: 100%;
		height: 100%;
	}
</style>